<template>
  <div>
    <van-nav-bar title="面经详情">
      <template #left>
        <span class="back" @click="$router.back()">返回</span>
      </template>
    </van-nav-bar>
    <div class="content-container">
      <h1 class="article-title">{{articleObj.stem}}</h1>
      <p class="article-state">{{articleObj.createdAt}}|{{articleObj.views}} 浏览|{{articleObj.likeCount}} 点赞</p>
      <div class="avatar-container">
        <img class="avatar" :src="articleObj.avatar" alt="">
        <p>{{articleObj.creator}}</p>
      </div>
      <div class="article-content" v-html="articleObj.content"></div>

      <!-- 点赞/收藏 -->
      <div class="favorite" :class="{active: articleObj.likeFlag === 1}" @click="changeArticleOpt(articleObj.id, 1)">
        <van-icon name="like" />
      </div>
      <div class="collextion" :class="{active: articleObj.collectFlag === 1}"
        @click="changeArticleOpt(articleObj.id, 2)">
        <van-icon name="star" />
      </div>
    </div>
  </div>
</template>

<script>
import { getInterviewShow } from '../api/article'
import { getInterviewOpt } from '../api/article'
export default {
  created() {
    console.log(this.$route);
    this.getArticleDetail(this.$route.params.id)
  },
  data() {
    return {
      select: false,
      articleObj: {}
    }
  },
  methods: {
    async getArticleDetail(id) {
      const res = await getInterviewShow(id)
      console.log(res);
      this.articleObj = res.data.data
    },
    async changeArticleOpt(id, opt) {
      const res = await getInterviewOpt(id, opt)
      console.log(res);
      if (res.data.code === 10000) {
        this.getArticleDetail(id)
      }
    }

  }
}
</script>

<style lang="less">
.back {
  color: #FA6D1D;
}

.content-container {
  margin: 0 16px 0 16px;
  position: relative;
  height: 100%;
}

.article-title {
  margin: 0;
  font-size: 27px;
}

.article-state {
  margin-top: 8px;
  font-size: 13px;
  color: #999;
}

.avatar-container {
  display: flex;
  align-items: center;
  color: #999;
}

.avatar-container img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.article-content {
  margin-top: 10px;
}


.favorite,
.collextion {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 16px;
  bottom: 90px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 2px 10px grey;
  display: flex;
  align-items: center;
  justify-content: center;

  &.active {
    background-color: #fec635;
    color: #fff;
  }
}

.favorite {
  right: 80px;
}
</style>